<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- 阻止所有爬虫 -->
        <meta name="robots" content="noindex">
        <!-- 阻止Google收录 -->
        <meta name="googlerobot" content="noindex">

        <title>迪斯尼流量统计</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.45.1/plotly.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <script>
        $(function() {
            $.ajax({
                url: 'log.csv',
                type: 'GET',
                success: function(data) {
                    var lines = data.split(/\r\n|\n/);
                    var x = [];
                    var y = [];
                    for (var i=0; i<lines.length; i++) {
                        var line = lines[i].split(',');
                        x.push(line[0]);
                        y.push(line[3]);
                    }
                    var graphs=[{
                        type: 'line',
                        name: 'Shanghai Disney',
                        line: {"width": 0.5},
                        marker: {"size": 0.8},
                        mode: "lines+markers",
                        showlegend: false,
                        x: x,
                        y: y
                    }];
                    var layout = {
                        "title":"上海迪士尼乐园人流量统计图",
                        "xaxis": {
                            "autorange": true,
                            "rangeslider": {
                                "autorange": true,
                            },
                            "title": "日期"
                        },
                        "yaxis": {
                            "title": "人流量"
                        }
                    }
                    Plotly.newPlot('bargraph',graphs,layout);
                },
                error: function(error) {
                    console.log(error);
                }
            });
        });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="chart" id="bargraph">
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

